<template>
	<view class="bg-light">
		<tabsTop tabName="账单"></tabsTop>
		<view class="row">
			<view class="button">下载</view>
			<view class="button" @click="toggleDropdown">{{selectedOption}}</view>
			<view></view>
		</view>
		<view v-if="showDropdown" class="dropdown">
			<view class="tab-container">
				<view v-for="(option, index) in dropdownOptions" :key="index" class="tab" @click="selectOption(option)">
					{{ option.name }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			return {
				showDropdown: false, // 控制下拉面板的显示与隐藏
				selectedOption: '全部', // 选中的选项
				dropdownOptions: [
					// {
					// 	name: '全部'
					// },
					// {
					// 	name: '充值'
					// },
					// {
					// 	name: '提现'
					// },
					// {
					// 	name: '支付'
					// },
					// {
					// 	name: '分润'
					// },
					// {
					// 	name: '退款'
					// },
					// {
					// 	name: '转账'
					// },
					// {
					// 	name: '退票'
					// }
				]
			}
		},
		onLoad() {
			this.getDropdownOptions()
		},
		methods: {
			toggleDropdown() {
				this.showDropdown = !this.showDropdown;
			},
			selectOption(option) {
				this.selectedOption = option.name;
				this.showDropdown = false;
			},
			getDropdownOptions() {
				uni.request({
					url: 'http://127.0.0.1:5500/src/json/bill.json',
					// data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// method,
					success: (res) => {
						console.log(res);
						this.dropdownOptions = res.data.Data
					},
				})
			}
		}
	}
</script>

<style>
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.button {
		padding: 10px;
		cursor: pointer;
	}

	.dropdown {
		padding: 10px;
		background-color: #f9f9f9;
		border: 1px solid #e2e2e2;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

	.tab-container {
		display: flex;
		flex-wrap: wrap;
	}

	.tab {
		flex: 0 0 calc(26% - 10px);
		margin: 5px;
		padding: 10px;
		background-color: #fff;
		text-align: center;
	}

	.tab:last-child {
		border-bottom: none;
	}
</style>